<template>
    <div class="flex-main">
        <div class="flex-body">
            <ul class="m-toplist">
                <li v-for="(item,index) in kindList" :key="index"
                :class="{'active':kindIdx==index}" @click="takeKind(index)">
                    <img :src="item.cover" alt="">
                    <p>{{item.ProjectKindName}}</p>
                </li>
            </ul>
            
            <no-data v-if="projectList.length<1"></no-data>
            <div class="m-items" v-else>
                <project-item class="m-item" v-for="(item,index) in projectList" :key="index"
                :project="item" :type="'1'"></project-item>
            </div>
        </div>
        
    </div>
</template>
<script>
import {projectKindList,projectListByKind} from '@/api/views';
export default {
    name:'',
    data () {
        return {
            kindList:[],
            projectList:[],
            kindIdx:0,
            pageNo:1,
            base_url:process.env.API_HOST,
        }
    },
    components: {
        projectItem:()=>import('@/model/projectList/projectItem'),
    },
    methods:{
        // 选择项目kind
        takeKind(index) {
            this.kindIdx = index;
            this.getProjectlist(this.kindList[index].ProjectKindNo);
        },
        // 获取kindlist
        getProjectKindlist() {
            let that = this;
            projectKindList().then((result) => {
                that.kindList = result.list;
                that.getProjectlist(result.list[0].ProjectKindNo);
            }).catch((err) => {
                
            });
        },
        getProjectlist(ProjectKindNo) {
            let that = this;
            this.$indicator.open('加载中...');
            let param = {
                ProjectKindNo:ProjectKindNo,
                page:that.pageNo,
                list_rows:10
            }
            projectListByKind(param).then(result=>{
                that.projectList = result.list.data;
                this.$indicator.close();
            }).catch(error=>{this.$indicator.close();});
        },
    },
    mounted() {
        this.getProjectKindlist();
    }
}
</script>
<style lang="less" scoped src="@/less/projectList/projectList.less"></style>
